<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <Row class="margin-top-10">
                        <Table border :loading="loading" :columns="columns" :data="data"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="page.total" :page-size="page.page_size" size="small" @on-change="pageOnChange" show-elevator show-total></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import '../../../styles/common.less';
    import '../../../styles/table.less';
    import {GET_OK, POST_OK, PUT_OK, DELETE_OK, PAGE_SIZE, uploadUrl, IMGURL} from '@/libs/config';
    import parseUrl from '@/libs/parseUrl';
    export default {
        name: 'index',
        data () {
            return {
                query: '',
                loading: true,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        key: 'id',
                        align: 'center'
                    },
                    {
                        title: '关键词',
                        key: 'keywords',
                        align: 'center'
                    },
                    {
                        title: '网址',
                        key: 'web',
                        align: 'center'
                    },
                    {
                        title: '联系人',
                        key: 'contact',
                        align: 'center'
                    },
                    {
                        title: '手机',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        align: 'center',
                        render: (h, params) => {
                            let c = '#ed3f14';
                            if (params.row.status === '已处理') {
                                c = '#19be6b';
                            }
                            return h('div', [
                                h('p', {
                                    style: {
                                        color: c
                                    }
                                }, params.row.status)
                            ]);
                        }
                    },
                    {
                        title: '时间',
                        key: 'created_at',
                        align: 'center'
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        align: 'center',
                        render: (h, params) => {
                            let d = 'default';
                            if (params.row.status === '已处理') {
                                d = 'none';
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: d
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '确定处理过该信息？',
                                                onOk: () => {
                                                    this.tagRowData(params.row.id);
                                                }
                                            });
                                        }
                                    }
                                }, '标记'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: d
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                render: (h) => {
                                                    return h('Input', {
                                                        props: {
                                                            value: '',
                                                            autofocus: true,
                                                            placeholder: '备注信息...'
                                                        },
                                                        on: {
                                                            input: (val) => {
                                                                this.remark = val;
                                                            }
                                                        }
                                                    });
                                                },
                                                onOk: () => {
                                                    this.note(params.row.id);
                                                }
                                            });
                                        }
                                    }
                                }, '备注'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '确定删除该信息？',
                                                onOk: () => {
                                                    this.delRowData(params.row.id);
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                cates: [],
                page: {
                    total: 0,
                    page_size: PAGE_SIZE,
                    currentPage: 1
                },
                remark: ''
            };
        },
        mounted () {
            this.getColumnsData();
        },
        methods: {
            getColumnsData (page) {
                this.loading = true;
                let query = this.query;
                let url = parseUrl.parse('seo', page, query);
                this.$http.get(url).then(res => {
                    if (res.data.code === GET_OK) {
                        this.data = res.data.data;
                        this.page.total = res.data.meta.total;
                    }
                }).catch().finally(() => {
                    this.loading = false;
                });
            },
            delRowData (id) {
                let url = `/seo/${id}`;
                this.$http.delete(url).then(res => {
                    if (res.data.code === DELETE_OK) {
                        this.$Notice.success({
                            title: '删除成功'
                        });
                        this.getColumnsData();
                    }
                });
            },
            tagRowData (id) {
                let url = `/seo/${id}`;
                this.$http.put(url).then(res => {
                    if (res.data.code === PUT_OK) {
                        this.$Notice.success({
                            title: '标记成功'
                        });
                        this.getColumnsData();
                    }
                });
            },
            pageOnChange (page) {
                this.getColumnsData(page);
                this.page.currentPage = page;
            },
            note (id) {
                this.$http.post('/seonote', {
                    id: id,
                    remark: this.remark
                }).then(res => {
                    this.getColumnsData();
                }).catch();
            }
        }
    };
</script>

<style scoped>

</style>

